<template>
  <div class="margin">
    <div class="topBtn">
      <Button type="info" @click="formShow">新增</Button>
      <Button type="warning" @click="dels" :disabled="!ids">批量删除</Button>
      <Button type="success">统计</Button>
      <div>
        <Input
          @on-search="getData"
          v-model="searchStr"
          search
          enter-button="查找"
          class="searchIpt"
          @keyup.enter="getData"
          placeholder="根据标题搜索"
        />
      </div>
    </div>
    <div class="wp">
      <Table
        border
        ref="selection"
        :columns="columns"
        :data="data"
        :loading="loading"
        @on-selection-change="getIds"
        :height="TableH"
        v-autoH
      ></Table>
      <Page
        @on-change="handelPage"
        :current="curP"
        :total="totalP"
        :page-size="pageSize"
        show-total
        class="page"
      />
    </div>
    <div class="formWp" v-if="showForm">
      <Row>
        <Col span="12" offset="6">
          <div style="background:#eee;padding: 40px;margin-top:40px">
            <Card :bordered="false">
              <p slot="title">{{form.id?'修改':'新增'}}</p>
              <a href="#" slot="extra" @click.prevent="close">
                <Icon type="ios-loop-strong"></Icon>关闭
              </a>
              <Form ref="formNewBd" :model="form" :rules="rules" :label-width="80">
                <Row>
                  <Col span="12">
                    <FormItem label="标题" prop="title">
                      <Input v-model="form.title" placeholder="请输入标题" />
                    </FormItem>
                  </Col>
                  <Col span="12">
                    <FormItem label="类型" prop="type">
                      <Select v-model="form.type" placeholder="请选择类型">
                        <Option v-for="item in typeArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
                      </Select>
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span="12">
                    <FormItem label="内容" prop="content">
                      <Input
                        v-model="form.content"
                        type="textarea"
                        :autosize="{minRows: 15,maxRows: 15}"
                        placeholder="请输入内容"
                      />
                    </FormItem>
                  </Col>
                  <Col span="12">
                    <FormItem label="预览">
                      <div class="yulan markdown-body">
                        <vue-markdown :source="form.content"></vue-markdown>
                      </div>
                    </FormItem>
                  </Col>
                </Row>
                <FormItem>
                  <Button type="primary" @click="handleSubmit('formNewBd')">保存</Button>
                  <Button @click="handleReset('formNewBd')" style="margin-left: 8px">清空</Button>
                </FormItem>
              </Form>
            </Card>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import axios from "../axios";
import { BdUrl,BdTypeUrl } from "../baseUrl/index";
import VueMarkdown from "vue-markdown";
export default {
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "标题",
          key: "title",
          width: 220,
          ellipsis: true
        },
        {
          title: "作者",
          key: "author",
          width: 80
        },
        {
          title: "日期",
          key: "date",
          width: 140,
          sortable:true
        },
        {
          title: "内容",
          key: "content",
          ellipsis: true
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.change(params.row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [],
      curP: 1,
      pageSize: 8,
      totalP: 0,
      loading: true,
      showForm: false,
      form: {},
      rules: {
        title: [
          {
            required: true,
            message: "标题不能为空",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change"
          }
        ],
        content: [
          {
            required: true,
            message: "内容不能为空",
            trigger: "blur"
          }
        ]
      },
      ids: "",
      searchStr:'',
      typeArr: [],
      TableH:'400'
    };
  },
  directives:{
    autoH:{
      inserted(){
        // console.log(1);
      },
      update(){
        // console.log(2);
      }
    }
  },
  methods: {
    getData() {
      this.loading = true;
      axios({
        url: BdUrl,
        method: "get",
        params: {
          transform: 1,
          order: "id,desc",
          page: `${this.curP},${this.pageSize}`,
          filter:`title,cs,${this.searchStr}`
        },
        success: data => {
          this.data = data.data.msbd;
          this.totalP = data.data._results;
          this.loading = false;
        }
      });
    },
    formShow(){
      this.getType();
      this.showForm = true;
    },
    change(params) {
      this.form = params;
      this.formShow()
    },
    remove(id) {
      if (!id) {
        alert("没有选择删除项");
        return;
      }
      if (confirm("确定要删除吗？")) {
        this.loading = true;
        axios({
          url: `${BdUrl}/${id}`,
          method: "delete",
          success: data => {
            this.getData();
          }
        });
      }
    },
    handelPage(val) {
      this.curP = val;
      this.getData();
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        this.form.date = Date.now();
        this.form.author = "abc";
        axios({
          url: this.form.id ? `${BdUrl}/${this.form.id}` : BdUrl,
          method: this.form.id ? "put" : "post",
          data: this.form,
          success: data => {
            this.$Message.success("提交成功！");
            this.close();
          }
        });
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    close() {
      this.showForm = false;
      this.getData();
      this.form = {};
    },
    getIds(row) {
      let arr = [];
      row.forEach(item => {
        arr.push(item.id);
      });
      this.ids = arr.join(",");
    },
    dels() {
      this.remove(this.ids);
    },
    getType(){
      axios({
        url:BdTypeUrl,
        method:'get',
        params:{
          transform:1
        },
        success:data=>{
          this.typeArr = data.data.bdtype
        }
      })
    },
    resetTH(){
      this.TableH = window.innerHeight-80-64-10-31.5-20-10-33
    }
  },
  mounted() {
    this.getData();
    this.getType();
    window.addEventListener('resize',this.resetTH)
  },
  components: {
    VueMarkdown
  }
};
</script>

<style>
.margin {
  margin: 10px 20px 0;
}
.wp {
  margin: 10px 5px;
}
.page {
  margin-top: 10px;
}
.formWp {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 999;
}
.yulan {
  height: 325px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-indent: 10px;
  overflow: auto;
  text-overflow: ellipsis;
}
.searchIpt {
  width: 50%;
  position: absolute;
  right: 0;
}
.topBtn{
  position: relative;
}
</style>
